// function getComponent() {
//   return import(/* webpackChunkName: "a" */ './a.js').then(math => {
//       console.log('ok')
//       return math;
//     }).catch(
//       error => 'An error occurred while loading the component'
//     )
// }

// getComponent().then(math => {
//   console.log(math)
// })

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './home.jsx'
const BasicExample = () => (
  <Router>
    <div>
      <Title />
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
        <li>
          <Link to='/topics'>Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
      <Route path='/topics' component={Topics} />
    </div>
  </Router>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = (match) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
)

const Topic = (match) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

class Title extends React.Component {
  constructor () {
    super()
    this.state = {
      name: 'abc'
    }
  }

  changeInput (e) {
    console.log(e.target.value)
    this.setState({
      name: e.target.value
    })
  }

  render () {
    console.log('render')
    return (
      <div>
        <span>名称</span>
        <input type='text' onChange={(e) => this.changeInput(e)} value={this.state.name}/>
        <p>提示</p>
      </div>
    )
  }
}

// DOM stage
const stage = document.getElementsByClassName('root')[0]
render((<BasicExample />), stage)
